<template>
    <div class="info">
        <div class="cov">
            <div class="title">病毒信息</div>
            <p>{{covDesc.note1}}</p>
            <p>{{covDesc.note2}}</p>
            <p>{{covDesc.note3}}</p>
            <p>{{covDesc.remark1}}</p>
            <p>{{covDesc.remark2}}</p>
            <p>{{covDesc.remark3}}</p>
        </div>
        <div class="hot">
            <div class="title">
                <img src="../../../assets/images/hot.png" alt="" width="100px">
            </div>
        </div>
        <ul class="imgLiIag">
            <li v-for="item in news" :key="item.id">
                <div class="newHot">最新</div>
                {{item.title}}
                <img src="../../../assets/images/right.png" alt="" >
            </li>
        </ul>
      
    </div>
</template>

<script>
    export default {
        props:{
            covDesc:{
                type:Object,
                default:function(){
                    return {}
                }
            },
            news:{
                type:Array,
                default:function(){
                    return []
                }
            }
                
            
        }
    }
</script>

<style lang="less" scoped>
.info{
    padding: 0.2rem;
    text-align: left;
    .title{
        border-left: 5px solid #999;
        padding-left:0.1rem ;
        margin-bottom: 00.2rem;
    }
    p{
        line-height: 0.5rem;
        color: #666;
    }
    li{
        margin-top: 0.3rem;
        font-size: 16px;
       letter-spacing:0.02rem;
    }
    .newHot{
        background-color: #f74c31;
        display :inline-block;
        height: 0.32rem;
        margin-top: 0.03rem;
        margin-right: 0.04rem;
        padding: 0 0.2rem;
        color: #fff;
        font-weight: 500;
        font-size: 0.11rem;
        line-height: 0.32rem;
        text-align: center;
        vertical-align: top;
        border-radius: 0.09rem;
    }
    .imgLiIag li img{
        width:18px;
        float: right;
    }
}

</style>